<div class="main-container">
  <div class="search-wrap">
    <div class="radio-wrap">
      <nz-radio-group [(ngModel)]="radioValue">
        <label nz-radio nzValue="single">单对象分析</label>
        <label nz-radio nzValue="multi">多对象分析</label>
      </nz-radio-group>
    </div>

    <div class="time-picker-wrap">
      自定义时间：
      <nz-range-picker
        [nzAllowClear]="false"
        [(ngModel)]="rangePickerValue"
        (ngModelChange)="rangePickerValueChange($event)"
        style="width: 300px;"
      >
      </nz-range-picker>
    </div>

    <div class="month-picker-wrap">
      <nz-select nzAllowClear nzPlaceHolder="年度" [(ngModel)]="yearValue" (ngModelChange)="yearChange($event)" style="width: 120px;margin-right: 30px;">
        <nz-option nzLabel="2020" [nzValue]="2020"></nz-option>
        <nz-option nzLabel="2019" [nzValue]="2019"></nz-option>
        <nz-option nzLabel="2018" [nzValue]="2018"></nz-option>
        <nz-option nzLabel="2017" [nzValue]="2017"></nz-option>
        <nz-option nzLabel="2016" [nzValue]="2016"></nz-option>
      </nz-select>
      <nz-radio-group [(ngModel)]="monthPickerValue" [nzButtonStyle]="'solid'" (ngModelChange)="monthPickerChange($event)">
        <label nz-radio-button [nzValue]="0">1月</label>
        <label nz-radio-button [nzValue]="1">2月</label>
        <label nz-radio-button [nzValue]="2">3月</label>
        <label nz-radio-button [nzValue]="3">4月</label>
        <label nz-radio-button [nzValue]="4">5月</label>
        <label nz-radio-button [nzValue]="5">6月</label>
        <label nz-radio-button [nzValue]="6">7月</label>
        <label nz-radio-button [nzValue]="7">8月</label>
        <label nz-radio-button [nzValue]="8">9月</label>
        <label nz-radio-button [nzValue]="9">10月</label>
        <label nz-radio-button [nzValue]="10">11月</label>
        <label nz-radio-button [nzValue]="11">12月</label>
      </nz-radio-group>
    </div>

    <div class="button-wrap">
      <button nz-button nzType="primary">打印</button>
      <button nz-button nzType="primary">导出</button>
    </div>

  </div>

  <div class="main-container">
    <ng-container *ngIf="radioValue == 'single'">
      <app-ecologic-water-single [dateRangeVal]="rangePickerValue"></app-ecologic-water-single>
    </ng-container>

    <ng-container *ngIf="radioValue == 'multi'">
      <app-ecologic-water-multi [dateRangeVal]="rangePickerValue"></app-ecologic-water-multi>
    </ng-container>
  </div>

</div>
